<script setup lang="ts">
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import chinaJSON from "@/assets/map.json";
let MapRef = ref();
// 1. 注册地图
echarts.registerMap("china", chinaJSON);
onMounted(() => {
  //2
  let mapChart = echarts.init(MapRef.value);
  mapChart.setOption({
    // 地图配置项
    geo: [
      {
        map: "china",
        zoom: 1.5,
        top: 125,
        roam: true, // 开启鼠标缩放和平移漫游
        label: {
          // 文字样式
          show: true,
          color: "white",
          fontSize: 14,
        },
        // 每个多边形的样式
        itemStyle: {
          color: "cyan",
          opacity: 0.5,
        },
        emphasis: {
          // 高亮样式
          itemStyle: {
            color: "yellow",
          },
          label: {
            fontSize: 20,
          },
        },
      },
    ],
    series: [
      {
        type: "lines",
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
              // 如果 polyline 为 true 还可以设置更多的点
            ],
            // 统一的样式设置
            lineStyle: {
              color: "red",
              width: 3,
            },
          },
        ],
        // 特效
        effect: {
          show: true,
          symbol: "arrow",
          symbolSize: 10,
          color: "orange",
        },
      },
    ],
  });
});
</script>

<template>
  <div class="map" ref="MapRef"></div>
</template>

<style scoped lang="scss">
.map {
  flex: 1.5;
  background-color: #1dc779;
  margin: 10px;
}
</style>
